<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户组管理</title>
<style type="text/css">
#rightCont{padding-top: 3px;}
#groupTree{margin-top: 10px;}
</style>
</head>
<body><rms:role operateCode="html_search">

	<div>
		<button id="btnAddRoot" class="button button-small">添加用户组</button>
	</div>
	
	<div class="sidebar-left" style="width: 260px;background: #fff;">
        <div id="groupTree"></div>
    </div>
    
    <div class="sidebar-right">
    	<div id="rightTip">
			<h3>&lt;&lt; 点击菜单查看信息</h3>
		</div>
		
		<div id="rightCont" style="display: none;width: 800px;">
			 <fieldset>
			    <legend>基础信息</legend>
			 	<form id="baseForm">
					<input type="hidden" name="parentId" value="0"> <input
						type="hidden" name="groupId" value="0">
					<table>
						<tr>
							<th width="100"><s>*</s> 用户组名称:</th>
							<td><input name="groupName"
								msgId="groupName_msg"
								rules="[
					  		     	{rule:{notNull:true},errorMsg:'不能为空'}
					  		     	,{rule:{maxLength:20},errorMsg:'长度不能超过20'}
					  		     ]"
								class="input-normal control-text" type="text"></td>
							<td id="groupName_msg"></td>
						</tr>
						<tr>
							<td></td>
							<td>
								<button id="btnSave" type="button" class="button button-primary">保存</button>
							</td>
						</tr>
					</table>
				</form>
			 </fieldset>
			<br>
			<div id="tabPanelCont">
				<div id="groupTab"></div>
				<div id="tabPanelUser">
					<form id="searchForm">
						<table cellpadding="5">
							<tr>
								<td>用户名:</td>
								<td><input name="usernameSch"
									class="input-normal control-text" type="text"></td>
								<td>
									<button type="button" id="btnUserSch"
										class="button button-small">搜索</button>
								</td>
							</tr>
						</table>
					</form>
					<hr>
					<div>
						<div class="grid-bar">
							<button  type="button" id="addUserBtn" class="button button-primary">添加成员</button>
						</div>
						<div id="gridUser"></div>
					</div>
				</div>
				<div id="tabPanelRole">
					<form id="addRoleForm" name="addRoleForm">
						<table cellpadding="5">
							<tr>
								<th>角色名称:</th>
								<td><input name="roleName"
									msgId="roleName_msg"
									rules="[
						  		     	{rule:{notNull:true},errorMsg:'不能为空'}
						  		     	,{rule:{maxLength:20},errorMsg:'长度不能超过20'}
						  		     ]"
									class="input-normal control-text" type="text"></td>
								<td id="roleName_msg"></td>
								<td>
									<button type="button" id="btnRoleAdd"
										class="button button-small">添加角色</button>
								</td>
							</tr>
						</table>
					</form>
					<hr>
					<div>
						<div id="gridRole"></div>
					</div>
				</div>
			</div>
		</div>
    </div>
    
    <div id="addNodeWin" class="hide">
		<form id="addNodeForm" name="addNodeForm">
			<input type="hidden" name="parentId" value="0">
			<table>
				<tr>
					<th width="100"><s> * </s> 用户组名称:</th>
					<td><input name="groupName"
						msgId="groupName_add_msg"
						rules="[
			  		     	{rule:{notNull:true},errorMsg:'不能为空'}
			  		     	,{rule:{maxLength:20},errorMsg:'长度不能超过20'}
			  		     ]"
						class="input-normal control-text" type="text"></td>
					<td id="groupName_add_msg"></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="addUserWin" class="hide">
		<div>
			<form id="addUserForm" name="addUserForm">
				<table cellpadding="5">
					<tr>
						<td>用户名:</td>
						<td><input name="usernameSch"
							class="input-normal control-text" type="text"></td>
						<td>
							<button type="button" id="btnAddUserSch"
								class="button button-small">查询</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<hr>
		<div>
			<div>
				请选择待添加的用户,已选择 <strong id="addUserCnt"> 0 </strong> 位用户
			</div>
			<div id="gridAddUser"></div>
		</div>
	</div>
<script type="text/javascript">
VUI.use(['PageForm','Tab','Tree','DialogForm'],function() {
	var listAllGroupUrl = ctx + 'listAllGroup.do';
	var addGroupUrl = ctx + 'addRGroup.do';
	var updateGroupUrl = ctx + 'updateRGroup.do';
	var delRGroupUrl = ctx + 'delRGroup.do';
	
	var listUserUrl = ctx + 'listRGroupUser.do';
	var delUserUrl = ctx + 'delRGroupUser.do';
	
	var tree;
	var treeStore;
	var tab;
	var tabStore;
	var userGrid;
	var userGridStore,roleGridStore;
	var baseForm,searchForm;
	var addNodeDialog;
	
	var $rightTip = $('#rightTip');
	var $rightCont = $('#rightCont');
	var $tabPanelCont = $('#tabPanelCont');
	
	function init() {
		initTree();
 		initForm();
 		initTab();
 		initGrid();
		initDialog();
	}
	
	function initTree() {

		tree = new VUI.Tree({
			renderId:'groupTree'
			,width:250
			,url:listAllGroupUrl
			,renderer:function(node) {
				var text = node.groupName;
				text += '&nbsp;' + buildTreeButton(node);

				return text;
			}
		});
		
	    tree.on('Select',function(ev){
	    	var node = ev.item;
		    bindData(node);
	    });
	}
	
	function initForm() {
		baseForm = new VUI.Form({formId:'baseForm'});
		searchForm = new VUI.Form({formId:'searchForm'});
	}
	
	function initTab() {
		tab = new VUI.Tab({
			renderId:'groupTab'
			,items:[
				{title:'用户组成员',contentId:'tabPanelUser'}
				,{title:'用户组角色',contentId:'tabPanelRole'}
			]
		});
	}
	
	function initGrid() {
       	userGrid = new VUI.Grid({
           	renderId:'gridUser'
           	,url:listUserUrl
           	,initLoad:false
           	,pagination:true
           	,striped:true
           	,columns : [[
  	       		{title:'用户名',field:'username',width:300}
  	            ,{title:'操作',field:'',formatter : function(value,obj){
  	                 var delStr = '<span class="grid-command btn-del">删除</span>';
  	                 return RightUtil.auth('opt_groupUser',delStr,'');
  	             }}
  	        ]]
       	});
       	
       	userGrid.on('ClickCell',function(ev){
       		var sender = $(ev.target); //点击的Dom
        	if(sender.hasClass('btn-del')){
            	var record = ev.row;
            	delUser(record);
        	}
       	});
	}
	
	
	function initDialog() {
		addNodeDialog = new VUI.DialogForm({
			contentId:'addNodeWin'
			,formId:'addNodeForm'
			,width:400
			,onOk:function() {
				saveNode();
			}
		});
	}
	
	function addUser() {
		initAddUser();
		searchNoAddUser();
		addUserWin.show();
	}
	
	function searchUser() {
		var data = searchForm.getData();
		var groupId = baseForm.getData('groupId');
		data.groupIdSch = groupId;
		userGrid.load(data);
	}
	
	function delUser(rowData) {
		var msg = '确定要移除<strong>'+rowData.username+'</strong>吗?';
		VUI.Msg.confirm('确认',msg,function(r){
			if(r) {
				doDelUser(rowData);
			}
		});
	}
	
	function doDelUser(row){
		Action.post(delUserUrl,row,function(result){
			Action.execResult(result,function(result){
				searchUser();
			});
		});
	}
	
	function buildTreeButton(node) {
		var html = [];
		if(!node.parentId) {
			var addNodeStr = '<a onclick="'
					+ FunUtil.createFunStopProp(window, 'addChildNode', node)
					+ ' return false;">[添加子节点]</a>';
			html.push(RightUtil.auth('opt_node',addNodeStr,''));
		}
		if (node.children.length == 0) {
			var delNodeStr = '<a onclick="'
					+ FunUtil.createFunStopProp(window, 'delGroup', node)
					+ ' return false;">[删除节点]</a>';
			html.push(RightUtil.auth('opt_node',delNodeStr,''));
		}
		return html.join('');
	}
	
	function bindData(node) {
		resetForm();
		
		baseForm.setData(node);
		
 		searchUser();
 		searchRole();
		
 		tab.select(0);
		
		$rightTip.hide();
		$rightCont.show();
		
		if(node.children && node.children.length > 0) {
			$tabPanelCont.hide();
		}else{
			$tabPanelCont.show();
		}
		
	}
	
	function resetPanel() {
		$rightTip.show();
		$rightCont.hide();
	}
	
	function saveGroup(){
		baseForm.submit({
			url:updateGroupUrl
			,onSubmit:function() {
				return this.check();
			}
			,success:function(result) {
				Action.execResult(result,function(result){
					loadTree();
					VUI.Msg.alert('提示','修改成功');
				});
			}
		});
	}

	function loadTree() {
		tree.reload();
	}
	
	function resetForm() {
		// 清除错误并重置
		baseForm.reset();
		addRoleForm.reset();
	}
	
	function addRootMenu(){
		addNodeDialog.show();
		addNodeDialog.setTitle('添加根节点');
		addNodeDialog.reset(); 
	}

	window.addChildNode = function(node){
		addNodeDialog.show();
		addNodeDialog.setTitle('父节点:' + node.groupName);
		addNodeDialog.setData({parentId:node.groupId});
	}
	
	function saveNode() {
    	addNodeDialog.submit({
    		url:addGroupUrl
    		,onSubmit:function(data) {
    			return this.check();
    		}
    		,success:function(result) {
    			Action.execResult(result,function(result){
    				loadTree();
    				addNodeDialog.close();
    			});
    		}
    	});
	}
	
	window.delGroup = function(node){
		var self = this;
		if (node) {
			var msg = '确定要删除<strong>'+node.groupName+'</strong>吗?'+
					'<br><span class="red">角色及权限将一并删除</span>';
			VUI.Msg.confirm('确认',msg,function(r){
				if(r) {
					Action.post(delRGroupUrl,node,function(result){
						Action.execResult(result,function(result){
							resetPanel();
							loadTree();
						});
					});
				}
			});
		}
	}
	
	$('#btnUserSch').click(function(){
		searchUser();
	});
	
	$('#btnSave').click(function(){
		saveGroup();
	});
	
	$('#btnAddRoot').click(function(){
		addRootMenu();
	});
	
	$('#addUserBtn').click(function(){
		addUser();
	});
	
	init();
	
	//--------添加用户组成员win-------
	var noAddUserForm;
	var gridAddUser;
	var gridAddUserStore;
	var addUserWin;
	var listAddUserUrl = ctx + 'listGroupNoAddUser.do';
	var addGroupUserUrl = ctx + 'addGroupUser.do';
	
	var $addUserCnt = $('#addUserCnt');
	
	function initAddUser() {
		if(!initAddUser.init) {
			initAddUser.init = true;
			initAddUserWin();
			initAddUserGrid();
			initAddUserForm();
		}
	}
	
	function initAddUserWin() {
		addUserWin = new VUI.Dialog({
			contentId:'addUserWin'
			,width:500
			,height:450
			,title:'添加成员'
			,onOk:function(){
				addGroupUser();
			}
			
		});
	}
	
	function initAddUserGrid() {
       	gridAddUser = new VUI.Grid({
           	renderId:'gridAddUser'
       		,url:listAddUserUrl
           	,columns : [[
           	    {field:'userId',checkbox:true}
   	        	,{title:'用户名',field:'username',width:300}
   	         ]]
       		,striped:true
       		,selectCache:true
           	,pagination:true
       	});
       	
       	gridAddUser.on('Check',function(e){
       		refreshGridMsg();
       	});
       	
       	gridAddUser.on('Uncheck',function(e){
       		refreshGridMsg();
       	});
	}
	
	function initAddUserForm() {
		noAddUserForm = new VUI.Form({formId:'addUserForm'});
	}
	
	function searchNoAddUser() {
		var data = noAddUserForm.getData();
		var groupId = baseForm.getData('groupId');
		data.groupIdSch = groupId;
		
		gridAddUser.load(data);
		
		resetAddUser();
	}

	function resetAddUser() {
		noAddUserForm.reset();
		$addUserCnt.text(0);
	}
	
	function addGroupUser() {
		var userIds = gridAddUser.getCheckIds();
		if(userIds && userIds.length > 0){
			var groupId = baseForm.getData('groupId');
			var params = {userIds:userIds,groupId:groupId};
			
			Action.post(addGroupUserUrl,params ,function(e){
				Action.execResult(e,function(e){
					addUserWin.close();
					userGrid.reload();
				})
			});
			
		}else{
			VUI.Msg.alert('提示','请选择成员');
		}
	}
	
	function refreshGridMsg() {
		var count = gridAddUser.getChecked().length;
		$addUserCnt.text(count);
	}
	
	$('#btnAddUserSch').click(function(){
		searchNoAddUser();
	});
	
	// groupRole
	var addRoleForm;
	var gridRole;
	var addRoleUrl = ctx + 'addRGroupRole.do';
	var delRoleUrl = ctx + 'delRGroupRole.do';
	var listRoleUrl = ctx + 'listRoleByGroupId.do';

	function initGroupRole() {
		if(!addRoleForm) {
			addRoleForm = new VUI.Form({formId:'addRoleForm'});
			
			gridRole = new VUI.Grid({
	           	renderId:'gridRole'
	           	,url:listRoleUrl
	           	,initLoad:false
	           	,pagination:true
	           	,striped:true
               	,columns : [[
                	{title:'角色名',field:'roleName',width:300}
                	,{title:'操作',field:'',formatter : function(value,obj){
                		var delStr = '<span class="grid-command btn-del">删除</span>';
                        return RightUtil.auth('grid_delRole',delStr,'');;
               		}}
                ]]
           	});
			
			gridRole.on('ClickCell',function(ev){
	       		var sender = $(ev.target); //点击的Dom
	        	if(sender.hasClass('btn-del')){
	            	var record = ev.row;
	            	delRole(record);
	        	}
	       	});
		}
	}

	function searchRole() {
		var data = {}
		data.groupId = baseForm.getData('groupId');
		gridRole.load(data);
	}

	function addRole() {
		addRoleForm.submit({
			url:addRoleUrl
			,onSubmit:function(data) {
				var r = this.check();
				if(r) {
					data.groupId = baseForm.getData('groupId');
				}
				return r;
			}
			,success:function(data) {
				Action.execResult(data,function(){
					searchRole();
					addRoleForm.reset();
				});
			}
		});
		
	}

	function doAddRole(row){
		Action.post(addRoleUrl,row,function(data){
			Action.execResult(data,function(){
				searchRole();
				addRoleForm.clean();
			});
		})
	}
	
	function delRole(rowData) {
		var msg = '确定要删除<strong>'+rowData.roleName+'</strong>吗?';
		VUI.Msg.confirm('提示',msg,function(r){
			if(r) {
				doDelRole(rowData);
			}
		});
	}

	function doDelRole(row){
		Action.post(delRoleUrl,row,function(result){
			Action.execResult(result,function(result){
				searchRole();
			});
		});
	}
	
	$('#btnRoleAdd').click(function(){
		addRole();
	});
	
	initGroupRole();
});
</script>

</rms:role>
</body>
</html>